import React, { useState, useEffect } from 'react';
import { Timeline, Card, Tag, Spin } from 'antd';
import { Link } from 'react-router-dom';
import { ClockCircleOutlined, TagOutlined } from '@ant-design/icons';
import { getAllPosts } from '../data/blogPosts';

const Archive = () => {
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // 获取所有文章数据
    const allPosts = getAllPosts();

    // 按日期排序并按年份分组
    const groupedPosts = allPosts.reduce((acc, post) => {
      const year = new Date(post.date).getFullYear().toString();
      if (!acc[year]) {
        acc[year] = [];
      }
      acc[year].push(post);
      return acc;
    }, {});

    // 转换为数组格式并排序
    const formattedPosts = Object.entries(groupedPosts)
      .map(([year, items]) => ({
        year,
        items: items.sort((a, b) => new Date(b.date) - new Date(a.date))
      }))
      .sort((a, b) => b.year - a.year);

    setPosts(formattedPosts);
    setLoading(false);
  }, []);

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div className="archive-page">
      <Card 
        title={
          <div className="flex items-center justify-between">
            <span>文章归档</span>
            <span className="text-sm font-normal">
              共 {posts.reduce((acc, year) => acc + year.items.length, 0)} 篇文章
            </span>
          </div>
        } 
        className="archive-card"
      >
        <Timeline
          items={posts.map(yearGroup => ({
            children: (
              <div key={yearGroup.year} className="year-group">
                <h3 className="text-xl font-bold mb-6 text-blue-500">
                  {yearGroup.year}
                </h3>
                {yearGroup.items.map(post => (
                  <div key={post.id} className="post-item mb-8">
                    <Link 
                      to={`/post/${post.id}`}
                      className="block hover:no-underline"
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <h4 className="text-lg font-medium mb-2 hover:text-blue-500 transition-colors">
                            {post.title}
                          </h4>
                          <div className="flex items-center text-sm text-gray-500 gap-4">
                            <span className="flex items-center">
                              <ClockCircleOutlined className="mr-1" />
                              {post.date}
                            </span>
                            <span className="flex items-center">
                              <TagOutlined className="mr-1" />
                              {post.readTime}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="mt-2">
                        {post.tags.map(tag => (
                          <Tag key={tag} className="mr-2">
                            {tag}
                          </Tag>
                        ))}
                      </div>
                    </Link>
                  </div>
                ))}
              </div>
            )
          }))}
        />
      </Card>
    </div>
  );
};

export default Archive; 